<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - 柔光日记</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 使用相同的样式基础... */
        
        body {
            background: linear-gradient(135deg, var(--primary-light) 0%, var(--secondary) 100%);
            color: var(--text);
            min-height: 100vh;
            display: flex;
            align-items: center;
        }
        
        /* 添加注册页面特定的样式... */
    </style>
    <script>
        function checkPasswordStrength() {
            const password = document.getElementById('password').value;
            const strengthMeter = document.getElementById('strength-meter');
            const strengthText = document.getElementById('strength-text');
            
            // 密码强度逻辑
            let strength = 0;
            
            if (password.length >= 8) strength += 1;
            if (/[A-Z]/.test(password)) strength += 1;
            if (/[0-9]/.test(password)) strength += 1;
            if (/[^A-Za-z0-9]/.test(password)) strength += 1;
            
            // 更新UI
            strengthMeter.className = `strength-meter strength-${strength}`;
            
            const strengthLabels = ['非常弱', '弱', '中等', '强', '非常强'];
            strengthText.textContent = `密码强度: ${strengthLabels[strength]}`;
        }
    </script>
</head>
<body>
    <div class="auth-container">
        <div class="auth-header">
            <div class="logo" style="justify-content: center; margin-bottom: 20px;">
                <div class="logo-icon">
                    <i class="fas fa-book-open"></i>
                </div>
                <div class="logo-text">
                    <h1>柔光日记</h1>
                    <div class="subtitle">AI 与年轻妈妈共育儿</div>
                </div>
            </div>
            <h2>创建新账号</h2>
            <p>加入柔光日记，开启智能育儿之旅</p>
        </div>
        
        <form class="auth-form">
            <div class="form-group">
                <label for="fullname">姓名</label>
                <input type="text" id="fullname" placeholder="请输入您的姓名">
            </div>
            
            <div class="form-group">
                <label for="email">邮箱</label>
                <input type="email" id="email" placeholder="请输入您的邮箱">
            </div>
            
            <div class="form-group">
                <label for="phone">手机号</label>
                <input type="tel" id="phone" placeholder="请输入您的手机号">
            </div>
            
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" placeholder="请输入您的密码" oninput="checkPasswordStrength()">
                <div class="password-strength">
                    <div id="strength-meter" class="strength-meter strength-0"></div>
                </div>
                <div id="strength-text" class="strength-text">密码强度: 非常弱</div>
            </div>
            
            <div class="form-group">
                <label for="confirm-password">确认密码</label>
                <input type="password" id="confirm-password" placeholder="请再次输入您的密码">
            </div>
            
            <div class="terms">
                <input type="checkbox" id="terms">
                <label for="terms">我已阅读并同意<a href="#">服务条款</a>和<a href="#">隐私政策</a></label>
            </div>
            
            <button type="submit" class="auth-btn">注册</button>
        </form>
        
        <div class="auth-footer">
            已有账号? <a href="login.html">立即登录</a>
        </div>
    </div>
</body>
</html>